<template>
  <div class="app-container dms-member">
    <el-row type="flex" justify="space-between" :gutter="12">
      <el-col :span="5">
        <el-card header="组织架构">
          <el-tree
            ref="setProductOrgTreeRef"
            class="dms-member-tree"
            :data="orgList"
            :props="{ label: 'organizationName', children: 'childs' }"
            highlight-current
            :expand-on-click-node="false"
            default-expand-all
            node-key="id"
            @node-click="handleOrgTreeCheck"
          />
        </el-card>
      </el-col>

      <el-col :span="7">
        <el-card header="产品列表">
          <el-tree
            ref="setProductProductTreeRef"
            :data="productList"
            :props="{ label: 'productName' }"
            :expand-on-click-node="false"
            default-expand-all
            node-key="id"
            show-checkbox
            @check-change="handleProductTreeCheckChange"
          />
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <el-table border style="width: 100%" :data="selectedProductList">
            <el-table-column
              label="产品名称"
              prop="productName"
              align="center"
            />

            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleSetRate(scope.row)"
                  >编辑费率</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <SetProductRate
      :show="setProductRateShow"
      :organization-id="organizationId"
      :product-id="productId"
      @dialog-visible="handleCloseSetRateDialog"
    />
  </div>
</template>

<script>
import { httpListOrgProduct, httpOrgListOrg } from "@/api/org";
import { fetchProductList } from "@/api/product";
import SetProductRate from "@/views/dms/set-product/components/SetProductRate.vue";
import { mapGetters } from "vuex";
// import { httpBindOrgProduct } from "@/api/orgProduct";

export default {
  name: "setProduct",

  components: { SetProductRate },

  data() {
    return {
      organizationId: null,

      // 组织列表
      orgList: [],

      productId: null,

      // 产品列表
      productList: [],

      // 选中的产品
      selectedProductList: [],

      setProductRateShow: false,
    };
  },

  created() {
    this.init();
  },

  computed: {
    ...mapGetters({
      userOrganizationId: "organizationId",
    }),
  },

  methods: {
    handleCloseSetRateDialog() {
      this.setProductRateShow = false;
      this.productId = null;
    },

    handleSetRate(value) {
      const { id } = value;

      this.productId = id;
      this.setProductRateShow = true;

      // try {
      //   httpBindOrgProduct({
      //     organizationId: this.organizationId,
      //     products: [
      //       {
      //         productId: id,
      //         productName: productName,
      //       },
      //     ],
      //   }).then(() => {
      //     this.setProductRateShow = true;
      //   });
      // } catch (error) {}
    },

    handleProductTreeCheckChange() {
      // console.log(this.$refs.setProductProductTreeRef.getCheckedKeys());
      // console.log(this.$refs.setProductProductTreeRef.getCheckedNodes());

      this.selectedProductList =
        this.$refs.setProductProductTreeRef.getCheckedNodes();
    },

    getProjectList() {
      fetchProductList({
        organizationId: this.organizationId,
        pageNum: 1,
        pageSize: 999999999,
      }).then((res) => {
        if (res.code === 200) {
          this.productList = res.data.list;

          this.getListOrgProduct();
        }
      });
    },

    getOrgListOrg() {
      httpOrgListOrg().then((res) => {
        if (res.code === 200) {
          this.orgList = res.data;

          if (this.orgList.length > 0) {
            const [defaultOrg] = this.orgList;
            this.handleOrgTreeCheck(defaultOrg);

            this.$nextTick(() => {
              this.$refs.setProductOrgTreeRef.setCurrentKey(
                this.organizationId,
              );
            });
          }
        }
      });
    },
    getListOrgProduct() {
      httpListOrgProduct(this.organizationId).then((res) => {
        this.$refs.setProductProductTreeRef.setCheckedKeys(
          res.data.map((item) => item.productId),
        );
      });
    },

    handleOrgTreeCheck(value) {
      if (value.id === this.organizationId) return;

      this.productList = [];
      this.selectedProductList = [];
      if (value.id !== this.userOrganizationId) {
        this.organizationId = value.id;

        this.getProjectList();
      } else {
        this.organizationId = undefined;
      }
    },

    /**
     * 初始化页面
     */
    init() {
      this.getOrgListOrg();
    },
  },
};
</script>

<style scoped lang="scss">
//
</style>
